<template>
	<div class="body">
		<van-cell-group class="space">
			<van-cell is-link title="我的头像">
				<template #value>
					<van-uploader :after-read="afterRead">
						<van-image round width="35" height="35"
							src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
					</van-uploader>
				</template>
			</van-cell>
			<van-cell title="真实姓名" :value="username" />
			<van-cell title="身份证号" value="4308***********" label="" />
			<van-cell title="推荐人" value="张淇毓" />
		</van-cell-group>

		<van-cell-group class="space">
			<van-cell title="账号安全" is-link />
			<van-cell title="隐私" is-link />
			<van-cell title="个人信息收集清单" is-link />
			<van-cell title="地址管理" is-link />
			<van-cell title="更换银行卡" is-link />
		</van-cell-group>

		<van-cell-group class="space">
			<van-cell title="注销" is-link />
			<van-cell title="版本更新" value="1.0.9.1" />
		</van-cell-group>
		<van-button class="bottom-button">安全退出</van-button>
	</div>
</template>

<script lang="ts" setup>
	import {
		onMounted
	} from 'vue';
	import router from '@/router';

	var username = localStorage.getItem("username")
	// username  = "abc"
	const afterRead = (file) => {
		// 此时可以自行将文件上传至服务器
		console.log(file);
	};

	const $emit = defineEmits(['change'])
	onMounted(() => {
		$emit("change", router.currentRoute.value.meta.title)
	})
</script>

<style>
	.bottom-button {
		color: darkorange;
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
	}

	.body {
		background-color: whitesmoke;
		height: 650px;
	}

	.space {
		margin-bottom: 5px;
	}
</style>
